<template>
	<view class="settings-container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="iconfont icon-arrow-left"></text>
			</view>
			<view class="nav-title">设置</view>
			<view class="nav-right"></view>
		</view>
		
		<!-- 设置列表 -->
		<view class="settings-list">
			<!-- 账户安全 -->
			<view class="settings-section">
				<view class="section-title">账户安全</view>
				
				<view class="settings-item" @click="goToChangePassword">
					<view class="item-left">
						<text class="iconfont icon-lock"></text>
						<text class="item-title">修改密码</text>
					</view>
					<view class="item-right">
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
				
				<view class="settings-item" @click="goToBindPhone">
					<view class="item-left">
						<text class="iconfont icon-phone"></text>
						<text class="item-title">绑定手机</text>
					</view>
					<view class="item-right">
						<text class="item-value">{{ userInfo.phone || '未绑定' }}</text>
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
				
				<view class="settings-item" @click="goToPayPassword">
					<view class="item-left">
						<text class="iconfont icon-wallet"></text>
						<text class="item-title">支付密码</text>
					</view>
					<view class="item-right">
						<text class="item-value">{{ userInfo.hasPayPassword ? '已设置' : '未设置' }}</text>
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
			</view>
			
			<!-- 消息通知 -->
			<view class="settings-section">
				<view class="section-title">消息通知</view>
				
				<view class="settings-item">
					<view class="item-left">
						<text class="iconfont icon-notification"></text>
						<text class="item-title">订单通知</text>
					</view>
					<view class="item-right">
						<switch 
							v-model="settings.orderNotification" 
							@change="updateSetting('orderNotification', $event.detail.value)"
							color="#007aff"
						/>
					</view>
				</view>
				
				<view class="settings-item">
					<view class="item-left">
						<text class="iconfont icon-message"></text>
						<text class="item-title">活动推送</text>
					</view>
					<view class="item-right">
						<switch 
							v-model="settings.activityNotification" 
							@change="updateSetting('activityNotification', $event.detail.value)"
							color="#007aff"
						/>
					</view>
				</view>
				
				<view class="settings-item">
					<view class="item-left">
						<text class="iconfont icon-sound"></text>
						<text class="item-title">声音提醒</text>
					</view>
					<view class="item-right">
						<switch 
							v-model="settings.soundNotification" 
							@change="updateSetting('soundNotification', $event.detail.value)"
							color="#007aff"
						/>
					</view>
				</view>
			</view>
			
			<!-- 隐私设置 -->
			<view class="settings-section">
				<view class="section-title">隐私设置</view>
				
				<view class="settings-item">
					<view class="item-left">
						<text class="iconfont icon-eye"></text>
						<text class="item-title">个人信息可见</text>
					</view>
					<view class="item-right">
						<switch 
							v-model="settings.profileVisible" 
							@change="updateSetting('profileVisible', $event.detail.value)"
							color="#007aff"
						/>
					</view>
				</view>
				
				<view class="settings-item">
					<view class="item-left">
						<text class="iconfont icon-location"></text>
						<text class="item-title">位置信息</text>
					</view>
					<view class="item-right">
						<switch 
							v-model="settings.locationAccess" 
							@change="updateSetting('locationAccess', $event.detail.value)"
							color="#007aff"
						/>
					</view>
				</view>
			</view>
			
			<!-- 其他设置 -->
			<view class="settings-section">
				<view class="section-title">其他</view>
				
				<view class="settings-item" @click="clearCache">
					<view class="item-left">
						<text class="iconfont icon-delete"></text>
						<text class="item-title">清除缓存</text>
					</view>
					<view class="item-right">
						<text class="item-value">{{ cacheSize }}</text>
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
				
				<view class="settings-item" @click="checkUpdate">
					<view class="item-left">
						<text class="iconfont icon-refresh"></text>
						<text class="item-title">检查更新</text>
					</view>
					<view class="item-right">
						<text class="item-value">v{{ appVersion }}</text>
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
				
				<view class="settings-item" @click="goToAbout">
					<view class="item-left">
						<text class="iconfont icon-info"></text>
						<text class="item-title">关于我们</text>
					</view>
					<view class="item-right">
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
			</view>
			
			<!-- 退出登录 -->
			<view class="logout-section">
				<view class="logout-btn" @click="showLogoutConfirm">
					退出登录
				</view>
			</view>
		</view>
		
		<!-- 退出登录确认弹窗 -->
		<view v-if="showLogoutModal" class="modal-overlay" @click="hideLogoutConfirm">
			<view class="modal-content" @click.stop>
				<view class="modal-title">确认退出</view>
				<view class="modal-message">确定要退出登录吗？</view>
				<view class="modal-actions">
					<view class="modal-btn cancel" @click="hideLogoutConfirm">取消</view>
					<view class="modal-btn confirm" @click="handleLogout">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api'
import { clearLoginInfo, goToLogin } from '@/api/auth.js'

export default {
	data() {
		return {
			userInfo: {},
			settings: {
				orderNotification: true,
				activityNotification: true,
				soundNotification: true,
				profileVisible: true,
				locationAccess: true
			},
			cacheSize: '0MB',
			appVersion: '1.0.0',
			showLogoutModal: false
		}
	},
	
	onLoad() {
		this.loadUserInfo()
		this.loadSettings()
		this.calculateCacheSize()
		this.getAppVersion()
	},
	
	methods: {
		// 返回
		goBack() {
			uni.navigateBack()
		},
		
		// 加载用户信息
		async loadUserInfo() {
			try {
				const userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
				
				// 从服务器获取最新用户信息
				const result = await api.userApi.getUserInfo()
				this.userInfo = { ...this.userInfo, ...result.data }
				uni.setStorageSync('userInfo', this.userInfo)
			} catch (error) {
				console.error('加载用户信息失败:', error)
			}
		},
		
		// 加载设置
		loadSettings() {
			try {
				const settings = uni.getStorageSync('userSettings')
				if (settings) {
					this.settings = { ...this.settings, ...settings }
				}
			} catch (error) {
				console.error('加载设置失败:', error)
			}
		},
		
		// 更新设置
		updateSetting(key, value) {
			this.settings[key] = value
			try {
				uni.setStorageSync('userSettings', this.settings)
				uni.showToast({
					title: '设置已保存',
					icon: 'success',
					duration: 1000
				})
			} catch (error) {
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			}
		},
		
		// 计算缓存大小
		calculateCacheSize() {
			// 模拟计算缓存大小
			const size = Math.random() * 50 + 10 // 10-60MB
			this.cacheSize = size.toFixed(1) + 'MB'
		},
		
		// 获取应用版本
		getAppVersion() {
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				this.appVersion = info.version
			})
			// #endif
		},
		
		// 修改密码
		goToChangePassword() {
			uni.navigateTo({
				url: '/pages/profile/change-password'
			})
		},
		
		// 绑定手机
		goToBindPhone() {
			uni.navigateTo({
				url: '/pages/profile/bind-phone'
			})
		},
		
		// 支付密码
		goToPayPassword() {
			uni.navigateTo({
				url: '/pages/profile/pay-password'
			})
		},
		
		// 清除缓存
		clearCache() {
			uni.showModal({
				title: '清除缓存',
				content: '确定要清除所有缓存数据吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除缓存逻辑
						uni.showLoading({ title: '清除中...' })
						
						setTimeout(() => {
							uni.hideLoading()
							this.cacheSize = '0MB'
							uni.showToast({
								title: '清除成功',
								icon: 'success'
							})
						}, 1000)
					}
				}
			})
		},
		
		// 检查更新
		checkUpdate() {
			uni.showLoading({ title: '检查中...' })
			
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '已是最新版本',
					icon: 'success'
				})
			}, 1000)
		},
		
		// 关于我们
		goToAbout() {
			uni.navigateTo({
				url: '/pages/webview/index?url=' + encodeURIComponent('/about')
			})
		},
		
		// 显示退出登录确认
		showLogoutConfirm() {
			this.showLogoutModal = true
		},
		
		// 隐藏退出登录确认
		hideLogoutConfirm() {
			this.showLogoutModal = false
		},
		
		// 退出登录
		async handleLogout() {
			try {
				// 调用退出登录接口
				await api.authApi.logout()
			} catch (error) {
				console.error('退出登录失败:', error)
			}
			
			// 清除本地数据
			clearLoginInfo()
			
			this.hideLogoutConfirm()
			
			uni.showToast({
				title: '已退出登录',
				icon: 'success'
			})
			
			// 跳转到登录页
			setTimeout(() => {
				goToLogin(true)
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.settings-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-top: var(--status-bar-height);
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	padding: 0 15px;
	background: #fff;
	border-bottom: 1px solid #eee;
	
	.nav-left {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.iconfont {
			font-size: 20px;
			color: #333;
		}
	}
	
	.nav-title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}
	
	.nav-right {
		width: 44px;
	}
}

.settings-list {
	padding: 10px 0;
}

.settings-section {
	margin-bottom: 10px;
	
	.section-title {
		padding: 15px 15px 10px;
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}
}

.settings-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
	
	.item-left {
		display: flex;
		align-items: center;
		
		.iconfont {
			font-size: 20px;
			color: #666;
			margin-right: 12px;
		}
		
		.item-title {
			font-size: 16px;
			color: #333;
		}
	}
	
	.item-right {
		display: flex;
		align-items: center;
		
		.item-value {
			font-size: 14px;
			color: #999;
			margin-right: 8px;
		}
		
		.iconfont {
			font-size: 16px;
			color: #ccc;
		}
	}
}

.logout-section {
	padding: 20px 15px;
	
	.logout-btn {
		width: 100%;
		height: 50px;
		background: #ff4757;
		color: #fff;
		border-radius: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 500;
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	width: 280px;
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	
	.modal-title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.modal-message {
		font-size: 14px;
		color: #666;
		text-align: center;
		line-height: 1.4;
		margin-bottom: 20px;
	}
	
	.modal-actions {
		display: flex;
		gap: 10px;
		
		.modal-btn {
			flex: 1;
			height: 40px;
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			
			&.cancel {
				background: #f0f0f0;
				color: #666;
			}
			
			&.confirm {
				background: #ff4757;
				color: #fff;
			}
		}
	}
}
</style>